<template>
  <el-dialog
      :title="datas.previewObj.title"
      v-model="datas.visiable"
      width="960px"
      z-index="999"
      destroy-on-close
      close-on-press-escape
      append-to-body>
    <iframe height="600px" width="100%" v-if="datas.previewObj.previewItems && datas.previewObj.previewItems.length > 0" :src="datas.previewObj.previewItems[0].url"></iframe>
  </el-dialog>
</template>
<script setup name="FolderDialog">
import {
  getPreviewData,
} from '@/api/knowledge/assets.js'
import {ref} from "vue";
let proxy = getCurrentInstance();
const emits = defineEmits(['closeDialog'])
const props = defineProps({
  visiable:{
    type: Boolean,
    default: false
  },
  previewId: {
    type: String
  }
})
const datas = reactive({
  visiable: false,
  loading: false,
  previewObj:{title:''}
})
watch( () => props.visiable, () => {
  datas.previewObj = {title:''};
  datas.visiable = true;
})

watch(() => props.previewId, () => {
  if (props.previewId) {
    getPreviewData(props.previewId).then(res => {
      if (res.success && res.data.previewItems && res.data.previewItems.length > 0) {
        console.log("preview:", res.data.title)
        datas.previewObj = res.data;
      }
    })
  }
})

</script>
